<template>
  <div class="wrap-setPer">
    <a-breadcrumb style="margin: 16px" separator=">">
      <a-breadcrumb-item
        v-for="(item, index) in $route.matched"
        :key="index"
        :to="{ path: item.path }"
        style="cursor: pointer"
      >
        {{ item.meta.title }}
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="account-body">
      <span class="account-body-title">我的评论</span>
      <ul>
        <li
          class="account-body-item"
          v-for="(item, index) in reviewDtls"
          :key="index"
        >
          <div class="preTitle">
            <span>{{ item.animalName }}</span>
          </div>

          <p>
            <span>{{ item.commentTime }}</span>
            <span
              class="dils"
              @click="
                () =>
                  showModal(
                    item.animalNumbers,
                    item.commentNumbers,
                    item.animalName,
                    item.commentContent
                  )
              "
              >详情</span
            >
            <span class="del" @click="() => deleteReview(item.commentNumbers)"
              >删除</span
            >
            <a-modal
              v-model:open="open"
              title="详情"
              @ok="handleOk"
              cancelText="取消"
              okText="确定"
            >
              <a-form
                :model="formState"
                name="review"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
                :colon="false"
                @finishFailed="onFinishFailed"
              >
                <a-form-item label="呢称" name="animalName">
                  <a-input
                    v-model:value="formState.animalName"
                    readOnly
                    style="border: none"
                  />
                </a-form-item>
                <a-form-item label="评论内容" name="commentContent">
                  <a-textarea v-model:value="formState.commentContent" />
                </a-form-item>
              </a-form>
            </a-modal>
          </p>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <a-pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共有 ${total} 条`"
        show-less-items
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getReviewByUserId,
  getReviewByAnimalNum,
  updataReview,
  delReview,
} from "@/service/api.js";
import { useRouter } from "vue-router";
import LocalCatch from "@/utils/token.js";
import { message } from "ant-design-vue";
const router = useRouter();
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const formState = ref({
  commentContent: "",
  animalName: "",
});
const reviewDtls = ref([]);
const commentNumbers = ref();
const userId = ref(parseInt(LocalCatch.getToken("userId")));
const getMyReview = async () => {
  const res = await getReviewByUserId({
    userId: userId.value,
    pageNumbers: current.value,
    pageSize: pageSize.value,
  });
  if (res.code === 1) {
    reviewDtls.value = res.data.records;
    // 分页
    console.log(res);
    pageSize.value = res.data.size;
    current.value = res.data.current;
    total.value = res.data.total;
  }
};
getMyReview();

const open = ref(false);
const showModal = async (animalNum, commentNum, aniName, Content) => {
  // 回显
  commentNumbers.value = commentNum;
  formState.value.animalName = aniName;
  formState.value.commentContent = Content;

  open.value = true;
};
// 修改
const handleOk = async (e) => {
  console.log(e);
  const res = await updataReview({
    commentNumbers: commentNumbers.value,
    commentContent: formState.value.commentContent,
  });
  console.log(res);
  if (res.code === 1) {
    message.success(res.msg);
    getMyReview();

    open.value = false;
  } else message.error(res.msg);
  open.value = false;
};
// 删除
const deleteReview = async (commentNum) => {
  const res = await delReview({ commentNumbers: commentNum });
  if (res.code === 1) {
    message.success("评论删除成功");
    getMyReview();
  } else message.error("评论删除失败");
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>
<style scoped>
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.wrap-setPer {
  width: 1000px;

  .account-body {
    width: 100%;
    padding: 24px 16px 0;
    min-height: 200px;
    background: #fff;
    font-size: 14px;
    display: flex;
    flex-flow: column nowrap;
    margin-top: 30px;
    .account-body-title {
      min-width: 72px;
      height: 24px;
      font-size: 18px;
      font-weight: 600;
      color: #2e2e2e;
      line-height: 24px;
    }
    ul {
      border: 0;
      font-size: 100%;
      vertical-align: baseline;
      margin: 0;
      padding: 0;
      font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei,
        Verdana, Roboto, Noto, Helvetica Neue, sans-serif !important;

      display: flex;
      flex-flow: column nowrap;
      width: 100%;
      .account-body-item {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        border-top: 1px solid #f0f0f5;
        padding: 16px;

        .preTitle {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          width: 54px;
          height: 24px;
        }
        p {
          display: flex;
          flex-flow: row nowrap;

          .dils {
            display: inline-block;
            min-width: 45px;
            margin-left: 32px;
            color: #988983;
            cursor: default;
          }
          .del {
            display: inline-block;
            min-width: 56px;
            cursor: default;
            color: #988983;
          }
        }
      }
    }
  }
  .pagination {
    float: right;
    margin-right: 30px;
  }
}
</style>
